<template>
    <div>
        <el-row>
            <el-col :span="8">
                <el-card>
                    <div class="user-info">
                        <img src="@/assets/img/photo.png" alt="">
                        <div class="user">
                            <p class="username">User</p>
                            <p class="role">普通用户</p>
                        </div>
                    </div>

                    <div class="welcome">
                        欢迎来到期刊在线投稿系统
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card class="box-card">
                    <div class="hot-manuscript">
                        <h3>热门期刊-《滋溪文稿》</h3>
                        <div class="manuscript-info">
                            <img src="@/assets/img/cover-img.jpg" alt="">
                            <div class="manuscript-desc">
                                <p>作者：<span>User</span></p>
                                <p>简介：<span>《滋溪文稿》是苏天爵撰作品，共30卷。因其藏书之滋溪书堂而得名。原为37卷，今诗稿7卷已佚而余30卷。系苏天爵任江浙行中书省参知政事时，其属掾高明、葛元哲所编。</span></p>
                                <p>投稿时间：<span>2022-11-17</span></p>
                                <p>获取点赞：<span>20</span></p>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="log">
                    <h3 class="title">系统日志记录</h3>
                    <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column prop="serialNumber" label="序号" width="100" />
                        <el-table-column prop="operator" label="操作人" width="180" />
                        <el-table-column prop="content" label="操作内容"/>
                        <el-table-column prop="time" label="操作时间" width="180"/>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
const tableData = [
    {
        serialNumber: '1',
        operator: '张三',
        content: '登录期刊在线投稿系统',
        time: '2024-11-25 20:47:00',
    },
    {
        serialNumber: '2',
        operator: '张三',
        content: '登录期刊在线投稿系统',
        time: '2024-11-25 20:47:00',
    },
    {
        serialNumber: '3',
        operator: '张三',
        content: '登录期刊在线投稿系统',
        time: '2024-11-25 20:47:00',
    },
    {
        serialNumber: '4',
        operator: '张三',
        content: '登录期刊在线投稿系统',
        time: '2024-11-25 20:47:00',
    },
    {
        serialNumber: '5',
        operator: '张三',
        content: '登录期刊在线投稿系统',
        time: '2024-11-25 20:47:00',
    },
    {
        serialNumber: '6',
        operator: '张三',
        content: '登录期刊在线投稿系统',
        time: '2024-11-25 20:47:00',
    },
    {
        serialNumber: '7',
        operator: '张三',
        content: '登录期刊在线投稿系统',
        time: '2024-11-25 20:47:00',
    },
    {
        serialNumber: '8',
        operator: '张三',
        content: '登录期刊在线投稿系统',
        time: '2024-11-25 20:47:00',
    },
]
</script>

<style lang="scss" scoped>

    .log {
        margin: 10px 0;
        .title {
            color: #9999;
            margin: 10px 0 10px 5px;
        }
    }

    .box-card {
        margin-left: 10px;
        .hot-manuscript {
            > h3 {
                margin-bottom: 20px;
            }
            .manuscript-info {
                display: flex;
                gap: 20px;
                img {
                    width: 100px;
                    //height: ;
                }
            }
            .manuscript-desc {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                > p {
                    &:nth-child(2) {
                        span {
                            display: -webkit-box;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
        }
    }

    .user-info {
        display: flex;
        //align-items: center;
        gap: 40px;
        border-bottom: 1px solid #999;
        padding-bottom: 5px;
        .user {
            color: #999;
            .username {
                font-size: 32px;
            }
            .role {

            }
        }
        img {
            width: 150px;
            height: 150px;
        }

    }
    .welcome {
        color: #999;
        margin-top: 10px;
        overflow: hidden;
    }
</style>